<!-- 硬件设备管理 -->
<template>
  <div>
    <div v-if="!modal.show">
      <div style="padding:20px 20px 20px;background-color:white;">
        <a-form layout="inline" class="nmv-search-form-auto" :labelCol="{ style: 'width: 75px' }">
          <a-form-item label="设备号">
            <a-input v-model="grid.queryParams.deviceNo" class="nmv-w-200" placeholder="请输入设备号"></a-input>
          </a-form-item>
          <a-form-item label="关联账号">
            <a-input v-model="grid.queryParams.accountName" class="nmv-w-200" placeholder="请输入关联账号"></a-input>
          </a-form-item>
          <a-form-item label="状态">
            <a-select placeholder="全部" allowClear @change="searchQuery" v-model="grid.queryParams.status"
              class="nmv-w-200 black_placeholders">
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="0">停用</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="所属企业">
            <a-select v-model="grid.queryParams.companyId" @change="searchQuery" allowClear
              placeholder="请选择企业" show-search :filter-option="filterOption" class="nmv-w-200">
              <a-select-option v-for="(item, i) in companiesAllListFilter" :key="i" :value="+item.id">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="所属门店">
            <a-select placeholder="全部门店" allowClear show-search :filter-option="filterOption" class="nmv-w-200"
              v-model="grid.queryParams.storeId" @change="searchQuery">
              <a-select-option v-for="item in storeList" :key="item.id" :value="+item.id">{{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" @click="searchQuery">查询</a-button>

            <a-button style="margin-left:12px" @click="onReset">重置</a-button>
          </a-form-item>
          <permissions type="vehicle/hardware/device/insert">
          <a-button style="margin-bottom:20px;" type="primary" icon="plus" class="float-r" @click="onAdd">新增硬件
          </a-button>
          </permissions>
          <permissions type="vehicle/hardware/device/import">
          <a-button style="margin-bottom:20px;margin-right: 12px;" class="float-r" ghost type="primary" @click="onImport">
            导入硬件
          </a-button>
          </permissions>

        </a-form>
        <a-table :scroll="{ x: 1300 }" :loading="grid.load" :pagination="false" rowKey="id" :locale="locale"
          :columns="grid.columns" :data-source="grid.data">
          <span slot="action" slot-scope="text, record">
            <permissions type="vehicle/hardware/device/status">
            <a-popconfirm v-if="record.status == 0" title="是否确认要启用该设备?" ok-text="确定" cancel-text="取消" @confirm="onChangeStatus(record.id,1)">
              <a>启用</a>
            </a-popconfirm>
            <a-popconfirm v-if="record.status == 1" title="是否确认要停用该设备?" ok-text="确定" cancel-text="取消" @confirm="onChangeStatus(record.id,0)">
              <a class="nmv-waring">停用</a>
            </a-popconfirm>
            </permissions>
            <a-divider  type="vertical" />
            <permissions type="vehicle/hardware/device/delete">
              <a-popconfirm  title="是否确认要删除该设备?" ok-text="确定" cancel-text="取消"
                @confirm="onDelete(record)">
                <a class="nmv-danger">删除</a>
              </a-popconfirm>
            </permissions>
          </span>

        </a-table>
        <div v-show="grid.total !== 0" style="text-align:right;">
          <a-pagination show-size-changer :current="grid.queryParams.pageNum" :pageSize="grid.queryParams.pageSize"
            @change="onChange" style="margin-top:20px;" size="small" @showSizeChange="onShowSizeChange"
            :total="grid.total" :show-total="total => `共${grid.total}条 `" />
        </div>
      </div>
      <hardwareDeviceAddDialog ref="hardwareDeviceAddDialogRefs" @modelClose="modelClose" />
      <OnImport ref="OnImportRefs" :title="titleData" @getList="queryReset" />
    </div>
  </div>
</template>

<script>
import Empty from '@/components/Empty/Empty'
import hardwareDeviceAddDialog from './Dialog/hardwareDeviceAddDialog'
import OnImport from '@/components/import/index'
import { deviceList } from '@/services/deviceManament'
import { hardwareDevice, hardwareDeviceStatus, hardwareDeviceDelete } from '@/services/car'
import {
  getAllStore,
  companiesAllList,
  agentList
} from '@/services/rider'
import permissions from '@/components/permissions'
export default {
  components: {
    hardwareDeviceAddDialog,
    OnImport,
    permissions
  },
  data () {
    return {
      companiesAllListFilter: [],
      agentList: [],
      titleData: '',
      time: [],
      deviceOptions: [],
      locale: {
        emptyText: <Empty />
      },
      grid: {
        load: false,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        columns: [
          {
            title: '设备号',
            dataIndex: 'deviceNo',
            key: 'deviceNo',
            width: 130,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '关联账号',
            dataIndex: 'accountName',
            key: 'accountName',
            width: 130,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '关联企业/门店',
            dataIndex: 'companyName',
            key: 'companyName',
            width: 210,
            customRender: (text, record) =>
              <div style="display:flex;flex-direction:column;">
                <p style="font-size:14px;margin-bottom:5px;">{record.companyName || '-'}</p>
                <p style="font-size:12px;margin:0;color:#999999">{record.storeName || '-'}</p>
              </div>
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 90,
            customRender: (text, record) => text === 0
              ? <div style="display:flex;align-items:center"><span style="background:red;width:10px;height:10px;border-radius:50%;margin-right:8px" ></span> 停用</div>
              : text === 1 ? <div style="display:flex;align-items:center"><span style="background:green;width:10px;height:10px;border-radius:50%;margin-right:8px"></span> 启用</div> : '-'
          },
          {
            title: '更新时间',
            dataIndex: 'updateTime',
            key: 'updateTime',
            width: 180,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '更新用户',
            dataIndex: 'updateName',
            key: 'updateName',
            width: 170,
            ellipsis: true,
            customRender: (text) => text || '-'
          },
          {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            fixed: 'right',
            width: 140,
            scopedSlots: { customRender: 'action' }
          }
        ],
        data: []
      },
      modal: {
        show: false
      },
      storeList: []
    }
  },
  created () {
    this.getHardwareDevice()
    this.parentCompanyIdGet()
    this.getCompaniesAllList()
  },
  methods: {
    async getCompaniesAllList () {
      const res = await companiesAllList()
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.companiesAllListFilter = response
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    async agentListGet (id) {
      const res = await agentList(id)
      const { isSuccess, data: response, msg } = res
      if (isSuccess) {
        this.agentList = response
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    // 刷新数据
    refreshData () {
      this.searchQuery()
    },

    changeDevice (values) {
      this.getAllDeviceList(values)
    },
    queryReset () {
      this.searchQuery()
    },
    modelClose () {
      this.searchQuery()
    },
    async onChangeStatus (id, status) {
      const res = await hardwareDeviceStatus({ id, status })
      if (res.isSuccess) {
        this.$message.newFun('操作成功!', 'success', 2)
        this.searchQuery()
      } else {
        this.$message.newFun(res.msg, 'error', 2)
      }
    },
    async onDelete (record) {
      const res = await hardwareDeviceDelete(record.id)
      if (res.isSuccess) {
        this.$message.newFun('删除成功!', 'success', 2)
        this.searchQuery()
      } else {
        this.$message.newFun(res.msg, 'error', 2)
      }
    },
    onSee (row) {
      this.$refs.deviceManagementDialogRefs.onInitial(row)
    },
    onAdd () {
      this.$refs.hardwareDeviceAddDialogRefs.onInitial()
    },
    onImport () {
      this.titleData = '导入设备'
      this.$refs.OnImportRefs.onInitial(10)
    },
    onChange (page, pageSize) {
      this.grid.queryParams.pageNum = page
      console.log(pageSize)
      this.searchQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.grid.queryParams.pageSize = pageSize
      this.grid.queryParams.pageNum = 1
      console.log(current)
      this.searchQuery()
    },
    async getHardwareDevice () {
      this.grid.load = true
      const res = await hardwareDevice(this.grid.queryParams)
      // console.log(res)
      if (res.code === 200) {
        // if (res.data.records.length > 0) {
        this.grid.data = res.data.records
        this.grid.total = res.data.total
        this.grid.load = false
        // } else {
        // this.$message.newFun('未查询到相关数据', 'error', 3)
        // this.grid.load = false
        // }
      } else {
        this.grid.load = false
      }
    },

    async getAllDeviceList (brandId) {
      const res = await deviceList({ brandId, status: 1 })
      if (res.isSuccess) {
        this.deviceOptions = res.data
      } else {
        this.$message.newFun(res.msg, 'error', 2)
      }
    },
    searchQuery (type) {
      if (type) {
        this.grid.queryParams.pageNum = 1
        this.grid.queryParams.pageSize = 10
      }
      this.getHardwareDevice()
    },
    onReset () {
      this.grid.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.time = []
      this.getHardwareDevice()
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    parentCompanyIdGet () {
      getAllStore().then((res) => {
        const { isSuccess, data: response, msg } = res
        if (isSuccess) {
          this.storeList = response
        } else {
          this.$message.newFun(msg, 'error', 2)
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<style >
.ant-popover-inner {
  width: 230px !important;
}
</style>
